<!--  -->
<template>
  <div id="showpop">
 
    <div class="nav bg-theme color-f text-l" >
        <div style="display:flex;flex:2;">
            <i class="iconfont icon-fanhui font19 pl08 iback" @click="gotoMobile()"></i>
            <!-- 详情进入 -->
            <span class="font19 ml16">
                {{ pagename }}
            </span>
        </div>
        
            <span  style="margin-right:10px;margin-left:10px">
                <van-icon @click="searchDialog()" name="search" size="25"/>
            </span>
    </div> 


    <div class="pageview">

        <allTabs ref="children" v-show="!haveDataError" ></allTabs>
        <!-- <van-tabs :active="0" sticky offset-top="200px">
            <van-tab v-for="index in 4" :key="index"  :title="'选项 ' + index">
                内容 {{ index }}
            </van-tab>
        </van-tabs> -->
        <div v-show="haveDataError" class="text-c">
            <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                alt="获取数据失败" style="margin: 120px 50px 0" @click="getTabs()" />
            <div class="color-b font14" style="margin: 20px 0 0 15px">
                获取数据失败!
            </div>
        </div>
        <van-popup v-model="showtodoDialog" position="top" style="padding:20px 0 20px 0"
         get-container="#showpop">
            <van-field
             input-align='left'
             label-width="2.5em"
             v-model="searchKey"
             label="标题:"
             placeholder="请填写标题"
            />
            <div style="display: flex;margin:20px 0 0 0">
              <div style="width:50% ;text-align: center;">
                 <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px" 
                 @click="resetSearch" 
                 type="default"
                 >
                 重置</van-button>
              </div>
             
              <div style="width:50%;text-align: center;">
                 <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px" 
                 @click="submitSearch" 
                 type="primary" 
                 color="#60a9ec"
                 >
                 查询</van-button>
              </div>
            </div>
            
        </van-popup>
    </div>
    
  </div>
</template>

<script type="text/javascript">
import allTabs from '@/components/djsp/listItem'
import {mapGetters} from 'vuex'
import { queryTabs} from "@/api/djspApi";
  export default {
    
    data(){
        return{
            showtodoDialog:false,
            searchKey:'',
            haveDataError:false,
            pagename:'党建视频列表',
            tabData:[],
        }
    },
    computed:{
        ...mapGetters(['user']),
    },
    components:{
        allTabs,
    },
   
    
    created() {
        this.pagename='党建视频列表'
        console.log("-----created-----");
        this.getTabs();
    },
    //方法调用
    methods: {
        searchDialog(){
            this.showtodoDialog=true;
        },
        resetSearch(){
            this.showtodoDialog=false;
            this.searchKey='';
            this.$refs.children.setSearchKey(this.searchKey);
        },
        submitSearch(){
            this.showtodoDialog=false;
            this.$refs.children.setSearchKey(this.searchKey);
            this.searchKey='';
        },
        gotoMobile(){
          if(this.showtodoDialog){
            this.showtodoDialog=false;  
          }
          this.$router.back(-1) //返回上一页
        }, 
        
        getTabs(){
            queryTabs({ source: "MOBILE", page: 1,  size: 50 })
            .then((result) => {//获取到数据后组装分类列表
                for(var index in result.data.data.content){
                    var item =result.data.data.content[index]
                    this.tabData = this.tabData.concat(item.classification);
                }
                this.$refs.children.setTabData(this.tabData);
            })
        }
    },
  }
</script>
<style  scoped>
/* @import url();*/
.item{
      text-align: center;
      width:20%
  }
  .pageview{
      height:100%;
      padding-top: 50px;
      margin-bottom: 60px;
      font-size: 12px;
  }
  .tabview{
      position: fixed;
      bottom: 0;
      width: 100%;
      line-height: var(--footer-height);
      background-color: gray;
      padding-top: 20px;
      padding-bottom: 20px;
  }
  .vh100{
    width: 100%;
  }
  .pf-20{
    padding-right: 20px;
  }
</style>